import React, {useEffect, useState} from "react";
import {Button, Space, Modal, Table, Tag, Popover, Switch} from "antd";
import { DeleteOutlined, SettingOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import axios from "axios";

const { confirm } = Modal;

export default function RightList() {
    const [dataSource, setDataSource] = useState([]);
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',  // key属性, 可写可不写
        },
        {
            title: '权限名称',
            dataIndex: 'title'
        },
        {
            title: '权限路径',
            dataIndex: 'key',
            render: text=><Tag color='orange'>{text}</Tag>
        },
        {
            title: '操作',
            key: 'operation',
            render: (record) => {
                return (
                    <Space size="middle">
                        <Button danger shape="circle" icon={<DeleteOutlined />} onClick={()=>deleteMethod(record)} />


                        <Popover  title="页面配置项"
                                  content={
                                      <div style={{textAlign: "center"}}>
                                        <Switch checked={record.pagepermission}
                                                onChange={()=>configurationMethod(record)}
                                        />
                                      </div>
                                  }
                                  trigger= { record.pagepermission===undefined ? '' : 'click' }
                        >
                            <Button type="primary" shape="circle"
                                    icon={<SettingOutlined />}
                                    disabled={ record.pagepermission===undefined }
                            />
                        </Popover>

                    </Space>
                )
            },
        },
    ];

    useEffect(()=>{
        axios.get('/api/rights?_embed=children').then(response=>{
            // console.log(response.data);
            const data= response.data;
            // data.forEach(item=>{
            //     if(item.children.length===0) {
            //         item.children= "";
            //     }
            // });
            for(let i=0; i<data.length; i++) {
                if(data[i].children.length===0) {
                    delete data[i].children;
                }
            }
            setDataSource(data)
        });
    }, []);

    const deleteMethod= (record)=>{
        confirm({
            title: '是否想要删除此项?',
            icon: <ExclamationCircleOutlined />,
            content: '删除操作不可撤回，请谨慎操作!!!',
            onOk() {
                // console.log(record);
                if(record.grade===1) {  // 一级菜单
                    // (当前页面删除该项)前端删除
                    setDataSource(dataSource.filter(data=>{
                        return data.id !== record.id;
                    }));

                    // 后端删除
                    axios.delete(`/api/rights/${record.id}`).then(()=>{
                        console.log('后端删除成功')
                    });
                } else {  // 二级菜单
                    // (当前页面删除该项)前端删除
                    let parent= dataSource.filter(data=>{
                        return data.id === record.rightId;
                    });
                    parent[0].children= parent[0].children.filter(data=>{
                        return data.id !== record.id;
                    });
                    setDataSource([...dataSource]);

                    // 后端删除
                    axios.delete(`/api/children/${record.id}`).then(()=>{
                        console.log('后端删除成功');
                    });
                }

            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }

    const configurationMethod = (record) => {
        // console.log(record);

        record.pagepermission = record.pagepermission===1 ? 0 : 1;
        setDataSource([...dataSource]);

        if(record.grade===1) {  // 一级菜单
            axios.patch(`/api/rights/${record.id}`, {
                pagepermission: record.pagepermission
            }).then(()=>{
                console.log('后端更新成功')
            });
        } else {  // 二级菜单
            axios.patch(`/api/children/${record.id}`, {
                pagepermission: record.pagepermission
            }).then(()=>{
                console.log('后端更新成功')
            });
        }
    };



    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} rowKey={ item=>item.id }/>
        </div>
    );
};
